<template>
  <card-slot class="center about" v-aos="'flip-left'">
    <template #title>
      <div class="w-[150px]">🎯 technology</div>
    </template>

    <template #page>
      <div>02</div>
    </template>

    <div class="common-shadow">
      <div class="mb-[20px]" v-for="(item, index) in list" :key="index">
        <div class="text-effect">{{ item.title }}</div>
        <img
          class="w-[40px] h-[40px] mt-[20px] mr-[10px]"
          :src="element"
          alt=""
          v-for="(element, eindex) in item.src"
          :key="eindex"
        />
      </div>
    </div>
  </card-slot>
</template>

<script setup lang="ts">
const list = ref<any>([
  {
    title: "Frontend",
    src: [
      getImageAbsolutePath("html5.png"),
      getImageAbsolutePath("css3.png"),
      getImageAbsolutePath("js.png"),
      getImageAbsolutePath("ts.png"),
      getImageAbsolutePath("vue.png"),
      getImageAbsolutePath("uni-app.png"),
      getImageAbsolutePath("nuxt.png"),
      getImageAbsolutePath("react.png"),
      getImageAbsolutePath("taro.png"),
      getImageAbsolutePath("Webpack.png"),
      getImageAbsolutePath("vite.png"),
      getImageAbsolutePath("webgl.png"),
      getImageAbsolutePath("Threejs-logo.png"),
    ],
  },
  {
    title: "Backend",
    src: [
      getImageAbsolutePath("php.png"),
      getImageAbsolutePath("ThinkPHP.png"),
      getImageAbsolutePath("MySQL.png"),
      getImageAbsolutePath("linux.png"),
      getImageAbsolutePath("Redis.png"),
      getImageAbsolutePath("Docker.png"),
    ],
  },
  {
    title: "Ui",
    src: [
      getImageAbsolutePath("bootstrap.png"),
      getImageAbsolutePath("elementui.png"),
      getImageAbsolutePath("naive-ui.png"),
      getImageAbsolutePath("AntDesign.png"),
      getImageAbsolutePath("vant.png"),
    ],
  },
  {
    title: "Tool",
    src: [
      getImageAbsolutePath("axios.png"),
      getImageAbsolutePath("git.png"),
      getImageAbsolutePath("sass.png"),
      getImageAbsolutePath("less.png"),
      getImageAbsolutePath("Unocss.png"),
      getImageAbsolutePath("tailwindcss.png"),
    ],
  },
]);
</script>

<style scoped lang="less">
.about {
  margin-top: 340px;

  .text-effect {
    font-weight: 500;
    font-size: 16px;
    background: linear-gradient(90deg, #333, #ee0979);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, text-shadow 0.3s;
  }
}

@media screen and (max-width: 755px) {
  .about {
    margin-top: 410px;
  }
}

@media screen and (max-width: 649px) {
  .about {
    margin-top: 330px;
  }
}

@media screen and (max-width: 570px) {
  .about {
    margin-top: 350px;
  }
}

@media screen and (max-width: 499px) {
  .about {
    margin-top: 410px;
  }
}
</style>
